//导入 gulp
const gulp = require("gulp");
const fs = require("fs");
//导入 gulp-babel
const babel = require("gulp-babel");
//导入 browserify 插件包
const browserify = require("gulp-browserify");
//导入重命名的插件包
const rename = require("gulp-rename");
//导入压缩 JS 文件的插件
const uglify = require("gulp-uglify");
//导入 less 插件包
const less = require("gulp-less");
//导入 autoPrefix 插件包
const LessAutoprefix = require("less-plugin-autoprefix");
//实例化对象
const autoprefix = new LessAutoprefix({ browsers: ["last 2 versions"] });
//导入合并 css 包
const concat = require("gulp-concat");
//导入压缩 css 包
const cssmin = require("gulp-cssmin");
//导入压缩 HTML 包
const htmlmin = require("gulp-htmlmin");
//导入热加载包
const livereload = require("gulp-livereload");
//创建 http 服务包
const connect = require("gulp-connect");
//自动打开浏览器网页
const opn = require("opn");

//声明一个任务  task 单词: 任务
gulp.task("hello", () => {
    console.log("Hello Gulp");
    //返回一个可读流对象  createReadStream
    return fs.createReadStream("./package.json");
});

//声明任务 语法转化
gulp.task("babel", () => {
    return gulp
        .src("./src/js/*.js") // 指定处理所有JS文件
        .pipe(
            babel({
                // 对JS使用Babel进ES6转ES5
                presets: ["@babel/preset-env"],
            })
        )
        .pipe(gulp.dest("build/js"))
        .pipe(livereload()); // 输出到指定目录
});

//声明任务
gulp.task("browserify", () => {
    return gulp
        .src("./build/js/index.js") //指定入口文件
        .pipe(browserify()) // 将CommonJs语法转换为浏览器能识别的语法
        .pipe(rename("bundle.js")) // 为了防止冲突将文件重命名
        .pipe(gulp.dest("build/js"))
        .pipe(livereload()); // 输出到指定位置
});

//压缩任务
gulp.task("uglify", function () {
    return gulp
        .src("build/js/bundle.js")
        .pipe(uglify()) //压缩js
        .pipe(rename("bundle.min.js")) // min 最小化
        .pipe(gulp.dest("dist/js"))
        .pipe(livereload());
});

//串行任务执行         系列
//      默认任务
gulp.task("default", gulp.series("babel", "browserify", "uglify"));

//编译 less 任务
gulp.task("less", function () {
    return gulp
        .src("./src/less/*.less")
        .pipe(
            less({
                plugins: [autoprefix], // 自动扩展前缀
            })
        )
        .pipe(gulp.dest("./build/css"))
        .pipe(livereload());
});

//合并 css 任务
gulp.task("concat", function () {
    return gulp
        .src("./build/css/*.css")
        .pipe(concat("bundle.css"))
        .pipe(gulp.dest("./build/css/concat"))
        .pipe(livereload());
});

//压缩 css 任务
gulp.task("cssmin", function () {
    return gulp
        .src("./build/css/concat/bundle.css")
        .pipe(cssmin())
        .pipe(rename("bundle.min.css"))
        .pipe(gulp.dest("./dist/css"))
        .pipe(livereload());
});

//压缩 html 任务
gulp.task("htmlmin", () => {
    return gulp
        .src("src/index.html")
        .pipe(
            htmlmin({
                collapseWhitespace: true, //去除空格
                removeComments: true, //去除注释
            })
        )
        .pipe(gulp.dest("dist"))
        .pipe(livereload());
});

// 定义自动执行的任务
gulp.task("watch", function () {
    //2.1 启动热加载服务
    livereload.listen();
    //2.2 通过自己服务器打开项目，自动刷新
    connect.server({
        root: "dist",     //网站根目录  静态资源文件夹
        port: 3000,       //端口
        livereload: true, //自动刷新页面
    });
    //2.3. 自动打开浏览器
    opn("http://localhost:3000/index.html");
    //2.4. 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）
    gulp.watch("./src/less/*.less", gulp.series(["less", "concat", "cssmin"]));
    gulp.watch("./src/js/*.js", gulp.series(["babel", "browserify", "uglify"]));
    gulp.watch("./src/index.html", gulp.series("htmlmin"));
});
